<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden;
        }
        body {
            background-image: url('../static/index_src.jpg');
            background-size: cover;
            background-position: center;
            position: relative; /* 允许绝对定位的子元素相对于body定位 */
        }
        .blur-background {
            position: absolute;
            top: 0;
            right: 0;
            width: 30%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(10px);
            z-index: 0; /* 确保模糊背景在最底层 */
        }
         .wrapper {
            position: absolute;
            top: 45%;
            left: 75%; /* 使用left代替right */
            width: 300px;
            height: 400px;
            transform: translate(-50%, -50%); /* 调整translate值以居中 */
            z-index: 1;
            transition: transform 0.5s ease-in-out;
            display: none;
        }

        .card-switch {
            width: 100%;
            height: 100%;
            background-color: transparent;
        }
        .switch {
            transform: translateY(-200px);
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 30px;
            width: 50px;
            height: 20px;
            cursor: pointer;
            margin-bottom: 20px; /* 添加边距 */
        }
        .card-side {
            position: relative;
            width: 100%;
            height: 100%;
        }
        .toggle {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            box-sizing: border-box;
            border-radius: 5px;
            border: 2px solid #323232;
            box-shadow: 4px 4px #323232;
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #fff;
            transition: 0.3s;
        }
        .slider:before {
            box-sizing: border-box;
            position: absolute;
            content: "";
            height: 30px;
            width: 20px;
            border: 2px solid #323232;
            border-radius: 5px;
            left: -2px;
            bottom: 2px;
            background-color: #fff;
            box-shadow: 0 3px 0 #323232;
            transition: 0.3s;
        }
        .toggle:checked + .slider {
            background-color: #2d8cf0;
        }
        .toggle:checked + .slider:before {
            transform: translateX(30px);
        }
        .card-side::before {
            position: absolute;
            content: '我是老人';
            left: -70px;
            top: 0;
            width: 100px;
            text-decoration: none;
            color: #323232;
            font-weight: 600;
        }
        .card-side::after {
            position: absolute;
            content: '我是子女';
            left: 70px;
            top: 0;
            width: 100px;
            text-decoration: none;
            color: #323232;
            font-weight: 600;
        }
        .flip-card__inner {
            width: 300px;
            height: 100%;
            position: relative;
            background-color: #fff;
            text-align: center;
            transition: none; /* 移除翻转效果相关的属性 */
            transform-style: none; /* 移除翻转效果相关的属性 */
        }
        .flip-card__front, .flip-card__back {
            padding: 20px;
            position: absolute;
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: lightgrey;
            gap: 20px;
            border-radius: 5px;
            border: 2px solid #323232;
            box-shadow: 4px 4px #323232;
        }
        .flip-card__front {
            z-index: 2; /* 确保正面在背面之上 */
        }
        .flip-card__form {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
        }
        .title {
            margin: 20px 0 20px 0;
            font-size: 25px;
            font-weight: 900;
            text-align: center;
            color: #323232;
        }
        .flip-card__input {
            width: 250px;
            height: 40px;
            border-radius: 5px;
            border: 2px solid #323232;
            background-color: #fff;
            box-shadow: 4px 4px #323232;
            font-size: 15px;
            font-weight: 600;
            color: #323232;
            padding: 5px 10px;
            outline: none;
        }
        .flip-card__input::placeholder {
            color: #666;
            opacity: 0.8;
        }
        .flip-card__input:focus {
            border: 2px solid #2d8cf0;
        }
        .flip-card__btn {
            margin: 20px 0 20px 0;
            width: 120px;
            height: 40px;
            border-radius: 5px;
            border: 2px solid #323232;
            background-color: #fff;
            box-shadow: 4px 4px #323232;
            font-size: 17px;
            font-weight: 600;
            color: #323232;
            cursor: pointer;
        }
        @keyframes slideIn {
            from {
                transform: translateX(100%); /* 开始时从屏幕外开始 */
            }
            to {
                transform: translateX(50%); /* 结束时移动到目的地 */
            }
        }

        /* 登录框加载时的动画 */
        .wrapper.slide-in {
            animation: slideIn 0.5s forwards;
        }
        .forgot-password {
            display: block;
            margin-top: 10px;
            text-align: center;
            text-decoration: none;
            color: #007bff; /* 链接颜色与主题蓝色一致 */
        }
        .forgot-password:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<div class="blur-background"></div>

<div class="wrapper" id="loginWrapper">
    <div class="card-switch">
        <label class="switch">
            <input type="checkbox" class="toggle">
            <span class="slider"></span>
            <span class="card-side"></span>
            <div class="flip-card__inner">
                <div class="flip-card__front">
                    <div class="title">Log in</div>
                    <form class="flip-card__form" action="/login" method="post">
                        <input class="flip-card__input" name="username" placeholder="Username" type="text" required>
                        <input class="flip-card__input" name="password" placeholder="Password" type="password" required>
                        <button class="flip-card__btn" type="submit">登录</button>
                        <!-- 添加忘记密码的链接 -->
                        <a class="forgot-password" href="/signup">忘记密码 ></a>
                    </form>
                </div>
                <!-- 注释掉翻转卡片的背面部分 -->
            </div>
        </label>
    </div>
</div>


<script>
window.onload = function() {
    var loginWrapper = document.getElementById('loginWrapper');
    loginWrapper.style.display = 'block'; // 显示登录框
    loginWrapper.classList.add('slide-in'); // 添加动画类

    // 监听滑动开关的change事件
    var toggle = document.querySelector('.toggle');
    toggle.addEventListener('change', function() {
        if (this.checked) {
            // 当开关打开时，执行某些操作
            console.log('Switch is ON');
        } else {
            // 当开关关闭时，执行某些操作
            console.log('Switch is OFF');
        }
    });
};
</script>

</body>
</html>